<template>

    <div class="dialog-body">
        <el-dialog v-if="!isSmallScreen" v-model="confirmVisible" width="600px" align-center
            :close-on-press-escape="false" :close-on-click-modal="false" :show-close="false">
            <template #default>
                <div class="dialog-content">
                    <h2>UK Disclaimer</h2>
                    <p>
                        This website and its content have been produced and disseminated for persons outside of the
                        United
                        Kingdom.
                        The information provided is not directed at or intended for distribution to, or use by, any
                        person
                        or entity
                        located within the UK. The financial products and services mentioned on this website are not
                        eligible for
                        the UK.
                    </p>
                    <p>
                        Crypto assets are classified as Restricted Mass Market Investments in the UK, meaning that they
                        are
                        high-risk investments and are not suitable for most retail investors. We expressly disclaim any
                        responsibility or liability for any access to or use of this website by any person located
                        within
                        the
                        UK.
                    </p>
                    <el-button type="primary" @click="confirmUnderstand">
                        I Understand
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <el-drawer v-else v-model="confirmVisible" direction="btt" :close-on-click-modal="false"
            :close-on-press-escape="false" :show-close="false" size="auto">
            <template #default>
                <div class="dialog-content">
                    <h2>UK Disclaimer</h2>
                    <p>
                        This website and its content have been produced and disseminated for persons outside of the
                        United
                        Kingdom.
                        The information provided is not directed at or intended for distribution to, or use by, any
                        person
                        or entity
                        located within the UK. The financial products and services mentioned on this website are not
                        eligible for
                        the UK.
                    </p>
                    <p>
                        Crypto assets are classified as Restricted Mass Market Investments in the UK, meaning that
                        they
                        are
                        high-risk investments and are not suitable for most retail investors. We expressly disclaim
                        any
                        responsibility or liability for any access to or use of this website by any person located
                        within
                        the
                        UK.
                    </p>
                    <el-button type="primary" @click="confirmUnderstand">
                        I Understand
                    </el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>

<script setup lang="ts" name="ukDialog">

import { useScreenSize } from '@/utils/useScreenSize';
import { ref } from 'vue';
const { isSmallScreen } = useScreenSize()

const confirmVisible = ref(true)

function confirmUnderstand() {
    confirmVisible.value = false
}

</script>

<style scoped lang="scss">
.dialog-body {
    :deep(.el-dialog) {
        border-radius: 1rem;
        padding: 1rem;

        .el-dialog__header {
            display: none;
        }
    }

    :deep(.el-button) {
        width: 100%;
        height: 50px;
        border-radius: 25px;
        font-size: 1rem;
        font-weight: bold;
    }

    :deep(.el-drawer) {
        padding-bottom: 1rem;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;

        .el-drawer__header {
            display: none;
        }
    }
}

.dialog-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    color: black;

    h2 {
        padding: 0;
        line-height: 1rem;
        padding-bottom: 1rem;
        text-align: left;
    }

    p {
        font-size: 0.9rem;
        line-height: 1.5;
        letter-spacing: 0;
    }

    .dialog-footer {
        width: 100%;
    }
}

@media (max-width: 650px) {
    .dialog-content p {
        font-size: 1rem;
    }
}
</style>